<script setup lang="ts">
  import ProLayout from '@/components/ProLayout';
  const title = 'NaiveUiPro';
  const menus = [
    {
      label: '系统管理',
      key: '/base/system',
      children: [
        {
          path: '/base/system/role',
          label: '角色管理',
          key: '/base/system/role',
        },
        {
          path: '/base/system/user',
          label: '用户管理',
          key: '/base/system/user',
        },
      ],
    },
    {
      label: '列表页面',
      key: '/base/list',
      children: [
        {
          path: '/base/list/basic',
          label: '基础列表',
          key: '/base/list/basic',
        },
      ],
    },
  ];
  const getTransitionName = 'zoom-fade';
  //   { value: 'zoom-fade', label: '渐变' },
  //   { value: 'zoom-out', label: '闪现' },
  //   { value: 'fade-slide', label: '滑动' },
  //   { value: 'fade', label: '消退' },
  //   { value: 'fade-bottom', label: '底部消退' },
  //   { value: 'fade-scale', label: '缩放消退' },
</script>
<template>
  <ProLayout :title="title" :menus="menus">
    <RouterView>
      <template #default="{ Component, route }">
        <transition :name="getTransitionName" mode="out-in" appear>
          <component :is="Component" :key="route.fullPath" />
        </transition>
      </template>
    </RouterView>
  </ProLayout>
</template>

<style scoped></style>
